<template>
	<view class="container">

		<!-- 服务评分 -->
		<view class="section">
			<text class="section-title">服务评分</text>
			<image style="width: 200px; height: 200px; background-color: #eeeeee;" 
			mode="aspectFill"
			src="https://gw.alicdn.com/imgextra/i4/O1CN01ZFAF6o1aGp4yYNoZD_!!0-rate.jpg"
			@error="imageError"></image>
			<view class="shop-info">
				<text class="shop-name">小王汽车美容店</text>
			</view>
			<view class="star-rating">
				<text v-for="i in 5" :key="i" class="star" :class="i <= score ? 'active' : ''"
					@click="handleScore(i)">★</text>
			</view>
		</view>

		<!-- 评语输入 -->
		<view class="section">
			<view class="input-header">
				<text class="section-title">评语（0-200字）</text>
				<text class="counter">{{ content.length }}/200</text>
			</view>
			<textarea v-model="content" class="textarea" placeholder="请写下您的意见和建议..." maxlength="200" />
		</view>

		<!-- 照片上传 -->
 <uni-section  title="最多五张" type="line">
        <uni-file-picker 
          v-model="imageList"
          fileMediatype="image" 
          limit="5"
		  @select="select"
		    @delete="deleteFile"
        />
      </uni-section>
		<!-- 提交按钮 -->
		<button class="submit-btn" @click="handleSubmit">提交</button>
	</view>
</template>

<script setup>
	import {ref} from 'vue'
	import { onLoad } from "@dcloudio/uni-app"
		onLoad((option)=>{
			console.log(option.orderNo); //打印出上个页面传递的参数。
			console.log(option.merchanId); //打印出上个页面传递的参数。
		})

	const score = ref(0)
	const content = ref('')
	const imageList = ref([])
	
const select = (e)=>{
	 const tempFilePaths = e.tempFilePaths;
	  tempFilePaths.forEach(tempFilePath => {
		  imageList.value.push(tempFilePath)
	 	 console.log(tempFilePath);
	 })
	 
};
	// 选择图片
	const chooseImage = async () => {
		try {
			const res = await uni.chooseImage({
				count: 3,
				sizeType: ['compressed']
			})
			imageList.value = [...imageList.value, ...res.tempFilePaths]
			console.log(res.tempFilePaths);
		} catch (error) {
			console.log('取消选择')
		}
	}
const deleteFile = async (res) => {
    console.log(res.tempFilePath)
    // let {tempFile: {uuid}} = res
    // let Index = null
    // let tar = data.FileList.filter((file, index) => {
    //     if (file.uuid == uuid) {
    //         Index = index
    //     }
    // })[0]
    // if (typeof Index == 'number') {
    //     data.FileList.splice(Index, 1)
    // }
}


	// 提交处理
	const handleSubmit = () => {
		console.log(imageList.value);
		if (!score.value) {
			return uni.showToast({
				title: '请先评分',
				icon: 'none'
			})
		}
		if (content.value.length < 10) {
			return uni.showToast({
				title: '评语至少10个字',
				icon: 'none'
			})
		}

		// 提交逻辑
		uni.showLoading({
			title: '提交中...'
		})
		setTimeout(() => {
			uni.hideLoading()
			uni.showToast({
				title: '提交成功'
			})
			// 清空数据
			// score.value = 0
			// content.value = ''
			// imageList.value = []
		}, 1000)
	}

	// 评分处理
	const handleScore = (val) => {
		score.value = val
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx;
		background: #fff;
		min-height: 100vh;
	}

	.header {
		padding: 40rpx 0;

		.title {
			font-size: 36rpx;
			font-weight: bold;
			text-align: center;
			display: block;
		}
	}

	.section {
		margin-bottom: 40rpx;

		&-title {
			font-size: 30rpx;
			color: #333;
			margin-bottom: 20rpx;
			display: block;
		}
	}

	.shop-info {
		margin-bottom: 20rpx;

		.shop-name {
			font-size: 28rpx;
			color: #666;
		}
	}

	.star-rating {
		.star {
			font-size: 50rpx;
			color: #ccc;
			margin-right: 20rpx;

			&.active {
				color: #ffd700;
			}
		}
	}

	.input-header {
		display: flex;
		justify-content: space-between;

		.counter {
			color: #999;
			font-size: 24rpx;
		}
	}

	.textarea {
		width: 100%;
		height: 200rpx;
		padding: 20rpx;
		background: #f5f5f5;
		border-radius: 8rpx;
		font-size: 28rpx;
	}

	.upload-box {
		width: 200rpx;
		height: 200rpx;
		border: 2rpx dashed #ddd;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.upload-icon {
			width: 60rpx;
			height: 60rpx;
			margin-top: 10rpx;
		}
	}

	.preview-container {
		margin-top: 20rpx;
		white-space: nowrap;

		.preview-image {
			width: 200rpx;
			height: 200rpx;
			margin-right: 20rpx;
			border-radius: 8rpx;
		}
	}

	.submit-btn {
		background: #007aff;
		color: #fff;
		border-radius: 50rpx;
		margin: 40rpx 20rpx;
	}
</style>